<template>
	<view class="padding-box">
		<!-- 聊天板块内容切换 -->
		<view class="head">
			<!-- <view class="type_box" v-for="(item,index) in typeList" :key="index" :class="{active:typeIndex==index}" @tap="selseType(index)"
			 v-text="item">
				<view v-if="typeIndex==index" class="smallBox"></view>
			</view> -->
			<view class="head-title">聊奇</view>
		</view>
		<!-- 聊天板块内容切换 -->

		<!-- 添加更多 -->
		<view class="select-tab" v-if="isShow">
			<view class="sanjiaox"></view>
			<view class="hidden-box">
				<view class="small-Box" @tap="toAddFriend">
					<image src="../../../static/jingyu/addfriend.png"></image>
					<view class="menu-title">添加好友</view>
				</view>
				<view class="small-Box" @tap="toCreatGroup">
					<image src="../../../static/jingyu/creatgroup.png"></image>
					<view class="menu-title">新建群聊</view>
				</view>
				<view class="small-Box active" @tap="toSaomiao">
					<image class="img1" src="../../../static/jingyu/scan.png"></image>
					<view class="menu-title">扫一扫</view>
				</view>
			</view>
		</view>
		<!-- 添加更多 -->

		<view class="" style="width: 750upx;overflow: hidden;">
			<!-- 搜索框 -->
			<view class="search_box">
				<view class="search" @tap="toSearth">
					<image src="../../../static/jingjie/search.png" mode=""></image>
					<text>搜索</text>
				</view>
				<image class="addImg" src="../../../static/jingyou/jia.png" mode="" @tap="toAdd"></image>
			</view>

			<!-- 搜索框 -->

			<!-- 消息板块 -->
			<view class="menu_box">
				<view class="menu_item" @tap="toNewFriend">
					<image src="../../../static/jingyou/newfriend.png" mode=""></image>
					<text>通讯录</text>
				</view>
				<view class="menu_item" @tap="toGroupTalk">
					<image src="../../../static/jingyou/groupchat.png" mode=""></image>
					<text>群聊</text>
				</view>
				<view class="menu_item" @tap="toFindSomeone">
					<!-- @tap="toHuDong" -->
					<image src="http://www.huihejituan.com/tripPictstorage/qmore/wx/04aebcd005b4fec1c2a851d863fbb33.png" mode=""></image>
					<text>找人</text>
				</view>
				<view class="menu_item" @tap="toHuDong">
					<!-- @tap="toHuDong" -->
					<image src="../../../static/jingyou/interaction.png" mode=""></image>
					<text>互动</text>
				</view>
			</view>
			<view class="" v-if="typeIndex==0">
				<!-- 官方消息 -->
				<!-- <view class="body_item body_margin" @tap="aaaa">
					<image class="headImg" src="/static/logo2.png" mode=""></image>
					<view class="body_item_mid">
						<text class="nickname">官方通知</text>
						<text class="content">抱歉,你的头像不够真实,将无法被显示</text>
					</view>
					<view class="body_item_right">
						<text class="time">13:55</text>
						<text class="tips">4</text>
					</view>
				</view> -->
				<!-- 官方消息 -->

				<!-- 用户消息列表 -->
				<view class="body">
					<!-- 设置置顶删除 -->
					<view class="infoAll" v-for="(item,index) in recentContacts" :key="index">
						<ul v-if="item.top">
							<li @touchstart="touchStart($event)" @touchend="touchEnd($event,index)" :data-type="item.type " style="background-color:#EDFBFE;"
							 @tap="toChat(item.SessionId,item.SessionType,item.MsgSeq)">
								<view class="imgInfo" @tap="recover(index)">
									<img :src="item.img">
								</view>
								<view class="centerInfo">
									<view class="name">
										<span>{{item.SessionId}}</span>
									</view>
									<view class="sonName">
										<span>{{item.MsgShow}}</span>
									</view>
								</view>
								<view class="timeInfo" @tap="recover(index)">
									<view class="time">
										<text>{{item.MsgTimeStamp}}</text>
									</view>
									<view class="infoNum" v-show="item.UnreadMsgCount!=0" :data-unms="item.UnreadMsgCount">
										<text style="font-size:12px;">{{item.UnreadMsgCount}}</text>
									</view>
								</view>
								<view class="top" @tap="top(index)" style="width:30%">
									取消置顶
								</view>
							</li>
						</ul>
					</view>
					<!-- 设置置顶删除 -->

					<!-- 用户聊天列表 -->
					<view class="infoAll" v-for="(item,index) in recentContacts" :key="index">
						<!-- {{item.img}} -->
						<ul v-if="!item.top">
							<li @touchstart="touchStart($event)" @touchend="touchEnd($event,index)" :data-type="item.type " @tap="toChat(item.SessionId,item.SessionType,item.MsgSeq)">
								<view class="imgInfo" @tap="recover(index)">
									<img :src="item.SessionImage">
								</view>
								<view class="centerInfo">
									<view class="name">

										<span v-if="item.SessionType == 'C2C' && item.C2cName !== ''">{{item.C2cName}}</span>
										<span v-else-if="item.SessionType == 'GROUP' && item.C2cName == ''">{{item.SessionNick}}</span>
										<span v-else>{{item.SessionId}}</span>
									</view>
									<view class="sonName">
										<span>{{item.MsgShow}}</span>
									</view>
								</view>
								<view class="timeInfo" @tap="recover(index)">
									<view class="time">
										<text>{{item.MsgTimeStamp}}</text>
									</view>
									<view class="infoNum" v-show="item.UnreadMsgCount!=0" :data-unms="item.UnreadMsgCount">
										<text style="font-size:12px;">{{item.UnreadMsgCount}}</text>
									</view>
								</view>
								<view class="top" @tap="top(index)">
									置顶
								</view>
								<view class="delect" @tap.stop="delect(index,item.SessionType,item.SessionId)">
									删除
								</view>
							</li>
						</ul>

					</view>
					<!-- 用户聊天列表 -->

					<!-- <view class="body_item box_border" @tap="toChat(item.SessionNick,item.SessionType)" v-for="(item,index) in recentContacts" :key='index'>
					<view class="image_box">
						<image class="headImg" :src="item.SessionImage" mode=""></image>
						<image class="country" src="../../../static/meiguo.png" mode=""></image>
					</view>
					<view class="body_item_mid">
						<text class="nickname" v-text="item.SessionNick"></text>
						<text class="content" v-text="item.MsgShow"></text>
					</view>
					<view class="body_item_right">
						<text class="time" v-text="item.MsgTimeStamp"></text>
						<text class="tips" v-if="item.UnreadMsgCount!=0" v-text="item.UnreadMsgCount"></text>
					</view>
				</view> -->
					<!-- <view class="group-btn">
				<view class="top" @tap="top(index)" v-if="item.top">
					取消置顶
				</view>
				<view class="top" @tap="top(index)" v-else>
					置顶
				</view>
				<view class="removeM" @tap="removeM(index)">
					删除
				</view>
			</view> -->
				</view>
				<!-- 用户消息列表 -->
			</view>
			<!-- 消息板块 -->

			<!-- 境友板块 -->
			<view class="" v-if="typeIndex==1">
				<view class="friends_top">
					<!-- 新的境友 -->
					<view class="friends_top_item" @tap="toNewFriend">
						<image src="../../../static/jingyou/newfriend.png" mode=""></image>
						<text>新的境友</text>
						<view class="bottomborder">
						</view>
					</view>
					<!-- 新的境友 -->

					<!-- 群聊 -->
					<view class="friends_top_item" @tap="toGroupTalk">
						<image src="../../../static/jingyou/groupchat.png" mode=""></image>
						<text>群聊</text>
						<view class="bottomborder">

						</view>
					</view>
					<!-- 群聊 -->

					<!-- 互动 -->
					<view class="friends_top_item" @tap="toHuDong">
						<image src="../../../static/jingyou/interaction.png" mode=""></image>
						<text>互动</text>
						<view class="bottomborder">
						</view>
					</view>
					<!-- 互动 -->
				</view>
				<!-- 我的好友 -->
				<view class="friend_bottom">
					<view class="friend_bottom_group">
						#
						<!--  获取好友列表进行拼音字母排序后重新渲染 -->
					</view>
					<view class="frient_bottom_item" @tap="toChat(item.Info_Account,item.SessionType)" v-for="(item,index) in tatable_friends_data"
					 :key="index">
						<view class="image_box">
							<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
							<image class="country" src="../../../static/meiguo.png" mode=""></image>
						</view>
						<view class="text_box">
							<text class="text1">{{item.Nick}}</text>
							<text class="text2">{{item.Info_Account}}</text>
						</view>
						<view class="bottomborder">
						</view>
					</view>
				</view>
				<!-- 我的好友 -->
			</view>
		</view>

		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue'
	// import moreCurious from '../../../components/moreCurious.vue'
	import uniSwipeAction from '../../../components/uni-swipe-action.vue'
	import util from '../../../common/util.js' //转换时间插件
	import webim from '../../../common/webim_wx.min.js' //腾讯云im包
	// import webimhandler from '../../../common/webim_handler.js' //这个是所有事件的腾讯js，这个页面需要用到登录
	import {
		app
	} from 'common/sdkConfig.js'
	
	
	export default {
		name: "contury",
		components: {
			mask,
			uniSwipeAction,
		},
		data() {
			return {
				getmsg: this.$store.state.getmsg,
				selToID: '',
				tatable_friends_data: [],
				typeList: ['消息', '猫友', '友圈'],
				typeIndex: 0,
				type: 0,
				isShowMask: false,
				isShow: false,
				recentContacts: "", //最近联系人
				user_info: "",
				user_result: "",
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				isdongtai: true,
				isdel: true,
				youquanList: [], //友圈详情
				currentPage: 1, //友圈页数
			};
		},
		
		created() {
			if (uni.getStorageSync('user_info') != ''  || uni.getStorageSync('user_id')) {
				this.user_info = uni.getStorageSync('user_info')
				this.user_sign = uni.getStorageSync('user_sign')
				console.log(this.user_info)
			} else {
				uni.showModal({
					title: '提示',
					content: '聊天功能需要登录才能使用，要前往登陆吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: "/pages/Other/login/login"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}

		},
		onLoad(option) {
			if (option.index != undefined) {
				this.typeIndex = option.index
			}
			// const call=uni.requireNativePlugin('Html5App-TencentCall'); 
		},
		onShow() {
			var that = this
			// 			uni.setNavigationBarTitle({
			// 				title: '自动处理索引列表'
			// 			});
			this.getRecentContactList()
		},
		onBackPress() {
			if (this.showMask) {
				this.showMask = false;
				return true;
			} else {
				uni.showModal({
					title: '提示',
					content: '是否退出应用？',
					success: function(res) {
						if (res.confirm) {
							// 退出当前应用，改方法只在App中生效  
							plus.runtime.quit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return true
			}
		},
		mounted() {
			//当前用户身份
			var loginInfo = {
				//正常接口
				'sdkAppID': app.data.Config.sdkappid, //用户标识接入SDK的应用ID，必填。（这个可以在腾讯云的后台管理看到）
				'appIDAt3rd': app.data.Config.sdkappid, //App 用户使用 OAuth 授权体系分配的 Appid，必填（这个其实和上面那个是一样的）
				'identifier': this.user_info.user_id, //用户帐号，必填   （这个就是自己服务器里，每个用户的账号，可以自己设置）
				'headurl': this.user_info.avatar,
				'identifierNick': this.user_info.nick_name, //用户昵称，选填   (这个填不填都没什么问题，但是我个人觉得，聊天嘛，还是得有一个网名)
				'accountType': app.data.Config.accountType, //账号类型，必填   (这个可以在后台管理看到，但是腾讯的文档上是没有这个的！！！但是这个必须填，	不填不报错）
				'userSig': this.user_sign, //鉴权 Token，identifier 不为空时，必填   我觉得这个也是必填的，这个需要在一开始就从后端获取。
				//正常接口
			}
			console.log(JSON.stringify(loginInfo) + '初始加载loginInfo')
			var AdminAcount = 'qwe101';
			var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
			var selToID = selToID; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
			var selSess = null; //当前聊天会话对象
			var recentSessMap = {}; //保存最近会话列表
			var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义
			var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。
			//默认好友头像
			// /var friendHeadUrl = 'img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友
			//默认群头像
			// var groupHeadUrl = 'img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况
			//存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
			var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息
			var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
			var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到
			var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
			var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到
			var emotionFlag = false; //是否打开过表情选择框
			var curPlayAudio = null; //当前正在播放的audio对象
			var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
			var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息
			var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到
			//监听（多终端同步）群系统消息方法，方法都定义在receive_group_system_msg.js文件中
			//注意每个数字代表的含义，比如，
			//1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息
			var onGroupSystemNotifys = {
				"1": this.onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到）
				"2": this.onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到）
				"3": this.onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到）
				"4": this.onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到)
				"5": this.onDestoryGroupNotify, //群被解散(全员接收)
				"6": this.onCreateGroupNotify, //创建群(创建者接收)
				"7": this.onInvitedJoinGroupNotify, //邀请加群(被邀请者接收)
				"8": this.onQuitGroupNotify, //主动退群(主动退出者接收)
				"9": this.onSetedGroupAdminNotify, //设置管理员(被设置者接收)
				"10":this.onCanceledGroupAdminNotify, //取消管理员(被取消者接收)
				"11": this.onRevokeGroupNotify, //群已被回收(全员接收)
				"15": this.onReadedSyncGroupNotify, //群消息已读同步通知
				"255": this.onCustomGroupNotify, //用户自定义通知(默认全员接收)
				"12": this.onInvitedJoinGroupNotifyRequest //邀请加群(被邀请者接收,接收者需要同意)
			};
			// 			//监听好友系统通知函数对象，方法都定义在receive_friend_system_msg.js文件中
			// 			var onFriendSystemNotifys = {
			// 				"1": onFriendAddNotify, //好友表增加
			// 				"2": onFriendDeleteNotify, //好友表删除
			// 				"3": onPendencyAddNotify, //未决增加
			// 				"4": onPendencyDeleteNotify, //未决删除
			// 				"5": onBlackListAddNotify, //黑名单增加
			// 				"6": onBlackListDeleteNotify //黑名单删除
			// 			};
			// 
			// 			var onC2cEventNotifys = {
			// 				"92": onMsgReadedNotify, //消息已读通知,
			// 				"96": onMultipleDeviceKickedOut
			// 			};
			// 
			// 			//监听资料系统通知函数对象，方法都定义在receive_profile_system_msg.js文件中
			// 			var onProfileSystemNotifys = {
			// 				"1": onProfileModifyNotify //资料修改
			// 			};
			//监听事件
			// var newMsgList = webim.Msg()
			var sessMap = webim.MsgStore.sessMap();
			var selSess = webim.MsgStore.sessByTypeId(selType, selToID);
			var listeners = {
				"onConnNotify": this.onConnNotify //监听连接状态回调变化事件,必填
					,
				// 				"jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
				// 					, 
				"onMsgNotify": this.onMsgNotify, //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
				// 					,
				// 				"onBigGroupMsgNotify": onBigGroupMsgNotify //监听新消息(直播聊天室)事件，直播场景下必填
				// 					,
				"onGroupSystemNotifys": this.onGroupSystemNotifys //监听（多终端同步）群系统消息事件，如果不需要监听，可不填
				// 					,
				// 				"onGroupInfoChangeNotify": onGroupInfoChangeNotify //监听群资料变化事件，选填
				// 					,
				// 				"onFriendSystemNotifys": onFriendSystemNotifys //监听好友系统通知事件，选填
				// 					,
				// 				"onProfileSystemNotifys": onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
				// 					,
				// 				"onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
				// 					,
				// 				"onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
				// 					,
				// 				"onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
				// 					,
				// 				"onLongPullingNotify": function(data) {
				// 					console.debug('onLongPullingNotify', data)
				// 				}
			};
			var isAccessFormalEnv = true; //是否访问正式环境
			var isLogOn = false; //是否开启sdk在控制台打印日志
			//初始化时，其他对象，选填
			var options = {
				'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
				'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
			}

			if (webim.checkLogin()) { //检查是否登录返回true和false,不登录则重新登录
				console.log('已登录')
				this.onMsgNotify()
				this.getRecentContactList(reqRecentSessCount)

			} else {
				console.log('登录')
				this.webimLogin(loginInfo, listeners, options, reqRecentSessCount)

			}
			// 			WebRTCAPI.fn.detectRTC({
			// 				screenshare: false
			// 			}, function(info) {
			// 				if (!info.support) {
			// 					console.log('不支持WebRTC')
			// 				}
			// 			});



		},
		methods: {
			setstore() {
				this.$store.commit('setstore')
				console.log(1)
			},
			clickData(data) {
				console.log('获取名：' + data.label)
				console.log('获取值：' + data.value)
			},
			touchStart(e) {
				// 获取移动距离，可以通过打印出e，然后分析e的值得出
				this.startX = e.mp.changedTouches[0].clientX;
			},
			// 滑动结束
			touchEnd(e, index) {
				// 获取移动距离
				this.endX = e.mp.changedTouches[0].clientX;
				if (this.startX - this.endX > 10) {
					for (let i = 0; i < this.recentContacts.length; i++) {

						this.recentContacts[index].type = 0
					}
					this.recentContacts[index].type = 1
				} else if (this.startX - this.endX < -10) {
					for (let i = 0; i < this.recentContacts.length; i++) {
						this.recentContacts[i].type = 0
					}
				}

			},
			// 点击回复原状
			recover(index) {
				this.recentContacts[index].type = 0
			},
			top(index) {
				this.recentContacts[index].top = !this.recentContacts[index].top;
				this.recover(index);
			},
			// 删除
			delect(index, sess_type, to_id) {
				var me = this;
				var data = {
					'To_Account': to_id,
					'chatType': sess_type
				}
				webim.deleteChat(
					data,
					function(resp) {
						me.recentContacts.splice(index, 1);
					}
				);


			},
			//sdk登录

			webimLogin(loginInfo, listeners, options, reqRecentSessCount) {
				// console.log(loginInfo)
				var _this = this;
				webim.login(
					loginInfo, listeners, options,
					function(resp) {

						// _this.setProfilePortrait()
						console.log('登录成功' + loginInfo)
						console.log(resp, '参数')
						loginInfo.identifierNick = resp.identifierNick; //设置当前用户昵称
						loginInfo.headurl = resp.headurl; //设置当前用户头像
						uni.setStorageSync('loginInfo', loginInfo);
						// initDemoApp();
						_this.onMsgNotify()
						// 						_this.initRecentContactList();  // 获取消息列表
						// 						webim.syncGroupMsgs({}, function(data) {
						// 							console.debug(data);
						// 						}, function(data) {
						// 							console.debug(data);
						// 						});
						_this.getRecentContactList(reqRecentSessCount) //查询最近联系人
					},
					function(err) {
						console.log("离线状态", err.ErrorInfo)
						uni.showToast({
							title: "离线状态",
							icon: 'none'
						})
						// alert(err.ErrorInfo);
					}
				);
			},
			//监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
			onMsgNotify(newMsgList) {
				console.log(newMsgList, '新消息')
				if (newMsgList != undefined) {
					uni.showTabBarRedDot({
						index: 3
					})
				}
				
				var _this = this
				// var selSess = webim.MsgStore.sessByTypeId(selType, selToID);
				// console.log(selSess,'selSess')
				var sess, newMsg, selToID;
				//获取所有聊天会话
				var sessMap = webim.MsgStore.sessMap();
				console.log(sessMap, '所有聊天会话')
				var idArr = [];
				for (var i = 0; i < sessMap.length; i++) {
					var item = sessMap[i]._impl
					console.log(item, '值')
					idArr.push(item.id)
				}
				console.log(idArr, '数组')
				for (var a = 0; a < this.recentContacts.length; a++) {
					var ArrIndex = idArr.indexOf(this.recentContacts[a].SessionId)
					console.log(ArrIndex, '是否在列表中')
					if (ArrIndex > -1) {
						var obj = this.recentContacts[a];
						obj.UnreadMsgCount = item._impl.unread
						this.recentContacts = this.recentContacts.splice(a, 1)
						this.recentContacts = this.recentContacts.unshift(obj)
					} else {
						var obj = this.getProfilePortrait(idArr[ArrIndex])
						this.recentContacts = this.recentContacts.unshift(obj)
					}
				}
				// console.log(sessMap)
				//获取全局的sessMap
				// updateSessDiv(sess.id(), sess.unread());
				_this.getRecentContactList()
				// 				for (var j in newMsgList) { //遍历新消息
				// 					newMsg = newMsgList[j];
				// 					console.log(newMsg.getSession().id(), 'id')
				// 					if (newMsg.getSession().id() == this.selToID) { //为当前聊天对象的消息
				// 						this.selSess = newMsg.getSession();
				// 
				// 						this.setstore()
				// 						this.getmsg = this.$store.state.getmsg
				// 						console.log(this.getmsg, 'msg')
				// 						console.log('这是消息列表的监听')
				// 
				// 						//在聊天窗体中新增一条消息
				// 						// console.log(newMsg,this.selSess);
				// 						_this.convertMsgtoHtml(newMsg)
				// 						// console.log(_this.convertMsgtoHtml(newMsg))
				// 						if (this.selSess != {}) {
				// 							var newmsg1 = []
				// 							// console.log(newMsg)
				// 							var obj = {
				// 								time: '',
				// 								text: '',
				// 								fromAccount: '',
				// 							}
				// 							obj.time = _this.timeProcessing.formatDate(newMsg.time) //时间
				// 							obj.fromAccount = newMsg.sess._impl.id //发送者id
				// 							for (var j = 0; j < newMsg.elems.length; j++) {
				// 								obj.text = newMsg.elems[0].content.text
				// 								newmsg1.push(obj)
				// 							}
				// 
				// 							// console.log(newmsg1)
				// 							uni.setStorageSync(
				// 								"newMsg", newmsg1
				// 							)
				// 							// 							
				// 						}
				// 						// 							
				// 					}
				// 					// this.addMsg(newMsg);
				// 
				// 				}
				//消息已读上报，以及设置会话自动已读标记
				// 				webim.setAutoRead(selSess, true, true);
				// for (var i in sessMap) {
				// 	sess = sessMap[i];
				// 						if (selToID != sess.id()) {//更新其他聊天对象的未读消息数
				// 							updateSessDiv(sess.type(), sess.id(), sess.unread());
				// 						}
				// }
			},
			// 			webim.syncMsgs = function (cbOk, cbErr) {
			// 			    return MsgManager.syncMsgs(cbOk, cbErr);
			// 			},
			onGroupSystemNotifys() {
				console.log(1)
			},
			//聊天页面增加一条消息

			//监听连接状态回调变化事件
			onConnNotify(resp) {
				var info;
				switch (resp.ErrorCode) {
					case webim.CONNECTION_STATUS.ON:
						webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
						break;
					case webim.CONNECTION_STATUS.OFF:
						info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
						uni.showToast({
							title: info,
							icon: 'none'
						})
						// alert(info);
						webim.Log.warn(info);
						break;
					case webim.CONNECTION_STATUS.RECONNECT:
						info = '连接状态恢复正常: ' + resp.ErrorInfo;
						uni.showToast({
							title: info,
							icon: 'none'
						})
						// alert(info);
						webim.Log.warn(info);
						break;
					default:
						webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
						break;
				}
			},
			//把消息转换成 HTML
			convertMsgtoHtml(msg) {
				var html = "",
					elems, elem, type, content;
				elems = msg.getElems(); //获取消息包含的元素数组
				for (var i in elems) {
					elem = elems[i];
					type = elem.getType(); //获取元素类型
					content = elem.getContent(); //获取元素对象
					switch (type) {
						case webim.MSG_ELEMENT_TYPE.TEXT:
							html += this.convertTextMsgToHtml(content);
							break;
							// 						case webim.MSG_ELEMENT_TYPE.FACE:
							// 							html += convertFaceMsgToHtml(content);
							// 							break;
							// 						case webim.MSG_ELEMENT_TYPE.IMAGE:
							// 							html += convertImageMsgToHtml(content);
							// 				 			break;
							// 						case webim.MSG_ELEMENT_TYPE.SOUND:
							// 							html += convertSoundMsgToHtml(content);
							// 							break;
							// 						case webim.MSG_ELEMENT_TYPE.FILE:
							// 							html += convertFileMsgToHtml(content);
							// 							break;
							// 						case webim.MSG_ELEMENT_TYPE.LOCATION://暂不支持地理位置
							// 							//html += convertLocationMsgToHtml(content);
							// 							break;
							// 						case webim.MSG_ELEMENT_TYPE.CUSTOM:
							// 							html += convertCustomMsgToHtml(content);
							// 							break;
							// 						case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
							// 							html += convertGroupTipMsgToHtml(content);
							// 							break;
						default:
							webim.Log.error('未知消息元素类型: elemType=' + type);
							break;
					}
				}
				return html;

			},
			onApplyJoinGroupRequestNotify(notify) {//群系统消息监听
				console.info("执行 加群申请 回调： %s", JSON.stringify(notify));
				console.log(notify,'申请加群')
				var data = [];
				var timestamp = notify.MsgTime;
				notify.MsgTimeStamp = timestamp;
				notify.MsgTime = webim.Tool.formatTimeStamp(notify.MsgTime);
				data.push(notify);
				// $('#get_apply_join_group_pendency_table').bootstrapTable('append', data);
				// $('#get_apply_join_group_pendency_dialog').modal('show');

				var reportTypeCh = "[申请加群]";
				var content = notify.Operator_Account + "申请加入您的群";
				addGroupSystemMsg(notify.ReportType, reportTypeCh, notify.GroupId,
					notify.GroupName, content, timestamp);
			},
			//解析文本消息元素
			convertTextMsgToHtml(content) {
				return content.getText();
			},
			//我的最近联系人
			getRecentContactList(reqRecentSessCount) {
				// initGetRecentContactListTable([]);
				var _this = this
				var options = {
					'Count': reqRecentSessCount //最近的会话数
				};
				webim.getRecentContactList(
					options,
					function(resp) {
						console.log(resp, '联系人')
						var data = [];
						var AdminAcount = 'qwe101';
						var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
						var selToID = 'admin2'; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
						var selSess = null; //当前聊天会话对象
						var recentSessMap = {}; //保存最近会话列表
						var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义
						var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。
						//默认好友头像
						var friendHeadUrl = ''; //仅demo使用，用于没有设置过头像的好友
						//默认群头像 
						var groupHeadUrl = 'img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况
						//存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
						var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息
						var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
						var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到
						var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
						var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到
						var emotionFlag = false; //是否打开过表情选择框
						var curPlayAudio = null; //当前正在播放的audio对象
						var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
						var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息
						var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到
						var tempSess, tempSessMap = {}; //临时会话变量
						if (resp.SessionItem && resp.SessionItem.length > 0) {
							for (var i in resp.SessionItem) {

								var item = resp.SessionItem[i];
								var type = item.Type; //接口返回的会话类型
								// console.log(type +)
								var sessType, typeZh, sessionId, sessionNick = '',
									sessionImage = '',
									senderId = '',
									senderNick = '';
								if (type == webim.RECENT_CONTACT_TYPE.C2C) {
									//私聊
									typeZh = '私聊';
									sessType = webim.SESSION_TYPE.C2C; //设置会话类型
									sessionId = item.To_Account; //会话id，私聊时为好友ID或者系统账号（值为@TIM#SYSTEM，业务可以自己决定是否需要展示），注意：从To_Account获取,

									if (sessionId == '@TIM#SYSTEM') { //先过滤系统消息，，
										webim.Log.warn('过滤好友系统消息,sessionId=' + sessionId);
										continue;
									}
									var key = sessType + "_" + sessionId;
									var c2cInfo = infoMap[key];
									// console.log(c2cInfo,'用户信息')
									if (item.C2cNick != '') { //从infoMap获取c2c昵称
										sessionNick = item.C2cNick; //会话昵称，私聊时为好友昵称，接口暂不支持返回，需要业务自己获取（前提是用户设置过自己的昵称，通过拉取好友资料接口（支持批量拉取）得到）
									} else { //没有找到或者没有设置过
										sessionNick = sessionId; //会话昵称，如果昵称为空，默认将其设成会话id
									}
									if (item.C2cImage != '') { //从infoMap获取c2c头像
										sessionImage = item.C2cImage; //会话头像，私聊时为好友头像，接口暂不支持返回，需要业务自己获取（前提是用户设置过自己的昵称，通过拉取好友资料接口（支持批量拉取）得到）
									} else { //没有找到或者没有设置过
										sessionImage = friendHeadUrl; //会话头像，如果为空，默认将其设置demo自带的头像
									}
									senderId = senderNick = ''; //私聊时，这些字段用不到，直接设置为空

								} else if (type == webim.RECENT_CONTACT_TYPE.GROUP) {
									//群聊
									typeZh = '群聊';
									sessType = webim.SESSION_TYPE.GROUP; //设置会话类型
									sessionId = item.ToAccount; //会话id，群聊时为群ID，注意：从ToAccount获取
									sessionNick = item.GroupNick; //会话昵称，群聊时，为群名称，接口一定会返回

									if (item.GroupImage) { //优先考虑接口返回的群头像
										sessionImage = item.GroupImage; //会话头像，群聊时，群头像，如果业务设置过群头像（设置群头像请参考wiki文档-设置群资料接口），接口会返回
									} else { //接口没有返回或者没有设置过群头像，再从infoMap获取群头像
										var key = sessType + "_" + sessionId;
										var groupInfo = infoMap[key];
										if (groupInfo && groupInfo.image) { //
											sessionImage = groupInfo.image
										} else { //不存在或者没有设置过，则使用默认头像
											sessionImage = groupHeadUrl; //会话头像，如果没有设置过群头像，默认将其设置demo自带的头像
										}
									}
									senderId = item.MsgGroupFrom_Account; //群消息的发送者id

									if (!senderId) { //发送者id为空
										webim.Log.warn('群消息发送者id为空,senderId=' + senderId + ",groupid=" + sessionId);
										continue;
									}
									if (senderId == '@TIM#SYSTEM') { //先过滤群系统消息，因为接口暂时区分不了是进群还是退群等提示消息，
										webim.Log.warn('过滤群系统消息,senderId=' + senderId + ",groupid=" + sessionId);
										continue;
									}

									senderNick = item.MsgGroupFromCardName; //优先考虑群成员名片
									// 									if (!senderNick) { //如果没有设置群成员名片
									// 										senderNick = item.MsgGroupFromNickName; //再考虑接口是否返回了群成员昵称
									// 										if (!senderNick) { //如果接口没有返回昵称或者没有设置群昵称，从infoMap获取昵称
									// 											var key = webim.SESSION_TYPE.C2C + "_" + senderId;
									// 											var c2cInfo = infoMap[key];
									// 											if (c2cInfo && c2cInfo.name) {
									// 												senderNick = c2cInfo.name; //发送者群昵称
									// 											} else {
									// 												// sessionNick = senderId; //如果昵称为空，默认将其设成发送者id
									// 											}
									// 										}
									// 									}

								} else {
									typeZh = '未知类型';
									sessionId = item.ToAccount; //
								}
								if (!sessionId) { //会话id为空
									webim.Log.warn('会话id为空,sessionId=' + sessionId);
									continue;
								}
								if (sessionId == '@TLS#NOT_FOUND') { //会话id不存在，可能是已经被删除了
									webim.Log.warn('会话id不存在,sessionId=' + sessionId);
									continue;
								}
								if (sessionNick.length > maxNameLen) { //帐号或昵称过长，截取一部分，出于demo需要，业务可以自己决定
									sessionNick = sessionNick.substr(0, maxNameLen) + "...";
								}
								tempSess = tempSessMap[sessType + "_" + sessionId];
								if (!tempSess) { //先判断是否存在（用于去重），不存在增加一个
									tempSessMap[sessType + "_" + sessionId] = true;
									data.push({
										SessionType: sessType, //会话类型
										SessionTypeZh: typeZh, //会话类型中文
										SessionId: webim.Tool.formatText2Html(sessionId), //会话id
										SessionNick: webim.Tool.formatText2Html(sessionNick), //会话昵称
										SessionImage: sessionImage, //会话头像
										C2cAccount: webim.Tool.formatText2Html(senderId), //发送者id
										C2cNick: webim.Tool.formatText2Html(senderNick), //发送者昵称
										UnreadMsgCount: item.UnreadMsgCount, //未读消息数
										MsgSeq: item.MsgSeq, //消息seq
										MsgRandom: item.MsgRandom, //消息随机数
										MsgTimeStamp: webim.Tool.formatTimeStamp(item.MsgTimeStamp), //消息时间戳
										MsgShow: item.MsgShow, //消息内容
										C2cName: item.C2cNick
									});
								}
							}
						}
						var unreadArr = []
						for (var i = 0; i < data.length; i++) {
							data[i].MsgTimeStamp = _this.myDate.getDateDiff(data[i].MsgTimeStamp)
							data[i].top = false
							data[i].type = "0"
							var sessMap = webim.MsgStore.sessMap()[webim.SESSION_TYPE.C2C + data[i].SessionId]; // 获取 sessMap
							// console.log(sessMap,'会话')
							if (sessMap) {
								var unread = sessMap.unread();
								console.log(unread, '未读数')
								data[i].UnreadMsgCount = unread; // 获取未读消息记数
								unreadArr.push(unread)
							}
						}
						_this.checkZore(unreadArr)

						_this.recentContacts = data

						console.log(data, '最近联系人列表')
						// 			            $('#get_recent_contact_list_table').bootstrapTable('load', data);
						// 			            $('#get_recent_contact_list_dialog').modal('show');
					},
					function(err) {
						console.log(err.ErrorInfo);
					}
				);
			},
			checkZore(arr) { //判断有没有未读消息
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] != 0) {
						return
					}
				}
				console.log('没有未读消息')
				uni.hideTabBarRedDot({
					index: 3
				})
			},
			getAllFriend() { //获取我所有好友
				var options = {
					'From_Account': this.user_info.user_id,
					'TimeStamp': 0,
					'StartIndex': 0,
					'GetCount': 100,
					'LastStandardSequence': 0,
					"TagList": [
						"Tag_Profile_IM_Nick",
						"Tag_SNS_IM_Remark",
						"Tag_Profile_IM_Gender",
						// "MsgShow"
					]
				};
				var _this = this
				webim.getAllFriend(
					options,
					function(resp) {
						console.log(resp)
						if (resp.FriendNum > 0) {
							var table_friends_data = [];
							var friends = resp.InfoItem;
							if (!friends || friends.length == 0) {
								uni.showToast({
									title: '你目前还没有好友',
									icon: 'none'
								})
								return;
							}
							var count = friends.length;
							//判断性别
							for (var i = 0; i < count; i++) {
								var friend_name = friends[i].Info_Account;
								var gender = "未知";
								if (friends[i].SnsProfileItem) {
									for (var j in friends[i].SnsProfileItem) {
										switch (friends[i].SnsProfileItem[j].Tag) {
											case 'Tag_Profile_IM_Nick':
												friend_name = friends[i].SnsProfileItem[j].Value;
												break;
											case 'Tag_Profile_IM_Gender':
												switch (friends[i].SnsProfileItem[j].Value) {
													case 'Gender_Type_Male':
														gender = '男';
														break;
													case 'Gender_Type_Female':
														gender = '女';
														break;
													case 'Gender_Type_Unknown':
														gender = '未知';
														break;
												}
												break;
										}
									}
								}
								table_friends_data.push({
									'Info_Account': friends[i].Info_Account,
									'Nick': webim.Tool.formatText2Html(friend_name),
									'Gender': gender,
									'SessionType': 'C2C'
								});
							}
							//判断性别
							console.log(table_friends_data)
							_this.tatable_friends_data = table_friends_data
							// 				            $('#get_my_friend_table').bootstrapTable('load', table_friends_data);
							// 				            $('#get_my_friend_dialog').modal('show');
						} else {
							uni.showToast({
								title: '您目前还没有好友',
								icon: 'none'
							})
						}

					},
					function(err) {
						console.log(err);
					}
				);
			},
			selseType(index) {
				var that = this
				this.typeIndex = index;
				var that = this;
				if (that.typeIndex == 0) {

				} else if (that.typeIndex == 1) {
					that.getAllFriend()

				} else if (that.typeIndex == 2) {
					that.getyouquanList()
				}
			},
			getProfilePortrait(id) {
				var peopleData;
				var tag_list = [
					"Tag_Profile_IM_Nick",
					"Tag_Profile_IM_Gender",
					"Tag_Profile_IM_AllowType",
					"Tag_Profile_IM_Image"
				];
				// var userIdGet = JSON.stringify(this.user_info.user_id)
				var options = {
					'To_Account': [id],
					'TagList': tag_list
				};
				// console.log(this.user_info.user_id)
				webim.getProfilePortrait(
					options,
					function(resp) {
						console.log(JSON.stringify(resp + '收到数据'));
						peopleData = JSON.stringify(resp)
					}
				)
				return peopleData
			},
			//获取用户资料设置
			setProfilePortrait() {
				var profile_item = [{
						"Tag": "Tag_Profile_IM_AllowType",
						"Value": "AllowType_Type_NeedConfirm"
					}

				]
				var options = {
					'ProfileItem': profile_item
				}
				// console.log(profile_item)
				webim.setProfilePortrait(
					options,
					function(resp) {
						console.log(JSON.stringify(resp) + '收到数据')
					},
					function(err) {
						console.log(JSON.stringify(err) + '炸了。')
					}
				)
			},
			//设置用户资料
			getPendency() {
				var totalCount = 30
				var options = {
					'From_Account': this.user_info.user_id,
					'PendencyType': 'Pendency_Type_ComeIn',
					'StartTime': 0,
					'MaxLimited': totalCount,
					'LastSequence': 0
				}
				webim.getPendency(
					options,
					function(resp) {
						console.log(resp)
					},
					function(err) {
						console.log(err)
					}
				)
			},
			toAdd() {
				this.isShow = true
				this.isShowMask = true
				// this.getPendency()
				this.getProfilePortrait() //获取用户资料设置
				// var myTime = myDate.toLocaleTimeString()
				// var min = myDate.getMinutes()
				// 				if (myDate.getMinutes() < 10){
				// 					 min = '0' + myDate.getMinutes() 
				// 				}
				// 				var myDate  = new Date()
				// 				var myTime = myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds()
				// 				console.log(myTime)
				// 				console.log(Object.prototype.toString.call(myTime))

			},

			closeMask() {
				this.isShow = false
				this.isShowMask = false
			},
			toSaomiao() { //扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
				this.isShow = false;
				this.isShowMask = false
			},
			toCreatGroup() { //创建群聊
				uni.navigateTo({
					url: "/pages/Friend/creatGroup/creatGroup"
				})
				this.isShow = false;
				this.isShowMask = false
			},
			toAddFriend() { //添加境友
				uni.navigateTo({
					url: "/pages/Friend/addFriend/addFriend"
				})
				this.isShow = false;
				this.isShowMask = false
			},
			toHuDong() { //互动
				// uni.navigateTo({
				// 	url: "/pages/Friend/hudong/hudong"
				// })
				uni.showToast({
					title:'敬请期待',
					icon:'none'
				})
			},
			toFindSomeone(){
				uni.navigateTo({
					url: "/pages/Friend/findSomeone/findSomeone"
				})
			},
			toGroupSet() { //群聊设置
				uni.navigateTo({
					url: "/pages/Friend/groupSet/groupSet"
				})
			},
			toGroupTalk() { //群聊列表
				uni.navigateTo({
					url: "/pages/Friend/groupTalk/groupTalk"
				})
			},
			toNewFriend() { //新境友
				uni.navigateTo({
					// url: "/pages/Friend/newFriend/newFriend"
					url: '/pages/Friend/myFriend/myFriend'
				})
			},
			toChat(item, chatType, MsgSeq) { //聊天
				this.selToID = item
				console.log(item, chatType, MsgSeq)
				uni.navigateTo({
					url: "/pages/Friend/chat/chat?item=" + item + "&chatType=" + chatType + "&MsgSeq=" + MsgSeq
				})
			},
			toSearth() {
				uni.navigateTo({
					// url: "/pages/Friend/search/search"
					url:'/pages/Friend/addFriend/addFriend'
				})
			},
			getyouquanList() {
				var me = this;
				var data = {
					oper_id: uni.getStorageSync('user_id'),
					currentPage: this.currentPage,
				}
				this.myAjaxNew({
					model: 'message',
					controllerName: "noteUser",
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						console.log(res.data.data, '友圈列表')
						if (res.data.data != null && res.data.data.length != 0) {
							me.youquanList = res.data.data
							for (var i = 0; i < me.youquanList.length; i++) {
								me.youquanList[i].create_time = me.youquanList[i].create_time.substring(0, 10)
								me.youquanList[i].cover = me.youquanList[i].cover.split(',')
								me.youquanList[i].picts = me.youquanList[i].picts.split(',')
							}
						} else {
							uni.showToast({
								title: '暂无友圈动态',
								icon: 'none'
							})
						}


					},
				})
			},
			toAddFriendMsg() {
				uni.navigateTo({
					// url: '/pages/Friend/newFriend/newFriend'
					url: '/pages/Friend/selectindex/selectindex'
				})
			},
		}
	}
</script>

<style scoped>
	.padding-box {
		padding-top: 162upx;
		width: 100%;
	}

	.infoAll {
		width: 100%;
		background: #fff;
	}

	.infoAll ul {
		width: 1100upx;
	}

	.infoAll:after {
		content: ",";
		display: block;
		clear: both;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}

	.infoAll ul li {
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
		width: 1100upx;
		height: 150upx;
		line-height: 150upx;
		border-bottom: 1px solid #E0EEF1;
		display: flex;
		align-items: center;
	}

	.infoAll ul li .imgInfo {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		/* background-color: #38A7FA; */
		margin-left: 2%;
	}

	.infoAll ul li .imgInfo img {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.infoAll ul li .centerInfo {
		width: 43%;
		height: 150upx;
		margin-left: 2%;
		text-align: left;
	}

	.infoAll ul li .centerInfo .name {
		margin-top: -20upx;
		width: 400upx;
	}

	.infoAll ul li .centerInfo .name span {
		font-size: 35upx;
	}

	.infoAll ul li .centerInfo .sonName {
		margin-top: -110upx;
		width: 400upx;
	}

	.infoAll ul li .centerInfo .sonName span {
		font-size: 24upx;
		color: #7C8489;
		width: 100%;
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.infoAll ul li .timeInfo {
		width: 150upx;
		height: 150upx;
		margin-left: 3%;
		display: flex;
		flex-direction: column;

	}

	.infoAll ul li .timeInfo .time {
		margin-top: -20upx;
		color: #92A0A1;
		font-size: 25upx;
		position: absolute;
	}

	.infoNum[data-unms='0'] {
		display: none !important;
	}

	.infoAll ul li .timeInfo .infoNum {
		/* display: none; */
		width: 50upx;
		height: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30upx;
		border-radius: 16upx;
		background: rgba(230, 0, 0, 1);
		margin-left: 10upx;
		margin-top: 70upx;
	}

	.infoAll ul li .timeInfo .infoNum {
		color: #fff;
	}

	.infoAll ul li .top {
		width: 15%;
		height: 150upx;
		background: rgba(230, 230, 230, 1);
		color: #fff;
		font-size: 34upx;
		text-align: center;
	}

	.infoAll ul li .delect {
		width: 15%;
		height: 150upx;
		background: rgba(230, 0, 0, 1);
		color: #fff;
		font-size: 34upx;
		text-align: center;
	}

	li[data-type="0"] {
		transform: translate3d(0, 0, 0);
	}

	li[data-type="1"] {
		transform: translate3d(-350upx, 0, 0);
	}






	.head {
		height: 162upx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		padding: 0 24upx;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1000;
	}

	.addImg {
		width: 36upx;
		height: 36upx;
	}

	.head-title {
		padding-top: 90upx;
		color: #333333;
		font-size: 36upx;
	}

	.type_box {
		padding-top: 58upx;
		display: flex;
		color: #999999;
		flex-direction: column;
		align-items: center;
	}

	.search_box {
		padding: 12upx 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		background: #FFFFFF;
		border-radius: 64upx;
		width: 90%;
		height: 64upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #999999;

	}

	.search image {
		height: 28upx;
		width: 28upx;
		margin-right: 10upx;
	}

	.menu_box {
		display: flex;
		justify-content: space-around;
		padding: 20upx 0;
		color: #999999;
		font-size: 32upx;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}

	.menu_box image {
		width: 108upx;
		height: 108upx;
	}

	.menu_item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.body_item {
		padding: 24upx 24upx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}

	.body_margin {
		margin-bottom: 20upx;
	}

	.box_border {
		border-bottom: 1upx solid #E6E6E6;
	}

	.image_box {
		position: relative;

	}

	.headImg {
		height: 106upx;
		width: 106upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.country {
		width: 36upx;
		height: 36upx;
		position: absolute;
		left: -4upx;
		bottom: 8upx;
	}

	.body_item_mid {
		display: flex;
		flex-direction: column;
	}

	.nickname {
		color: #333333;
		font-size: 32upx;
		margin-bottom: 20upx;
	}

	.content {
		color: #666666;
		font-size: 26upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 420upx;
		text-align: left;
	}

	.body_item_right {
		position: relative;
	}

	.time {
		color: #CCCCCC;
		font-size: 24upx;
	}

	.tips {
		background: #E60000;
		height: 32upx;
		line-height: 32upx;
		padding: 0 10upx;
		border-radius: 24upx;
		color: #FFFFFF;
		font-size: 20upx;
		text-align: center;
		position: absolute;
		right: 6upx;
		bottom: 14upx;
	}

	.active {
		color: #46CECF;
	}

	.smallBox {
		width: 32upx;
		height: 6upx;
		background: #46CECF;
		border-radius: 3upx;
		position: relative;
		bottom: -4upx;
	}

	.friends_top_item {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 24upx 24upx;
		position: relative;
	}

	.friends_top_item image {
		width: 108upx;
		height: 108upx;
		margin-right: 25upx;
	}

	.friends_top_item text {
		color: #333333;
		font-size: 32upx;
	}

	.bottomborder {
		position: absolute;
		width: 600upx;
		border-bottom: 1upx solid #E6E6E6;
		bottom: 1upx;
		right: 0;
	}

	.frient_bottom_item {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 24upx 24upx;
		position: relative;
	}

	.friend_bottom_group {
		padding: 10upx 24upx;
		font-size: 24upx;
		color: #999999;
	}

	.text_box {
		display: flex;
		flex-direction: column;
		padding-left: 26upx;
	}

	.text1 {
		color: #333333;
		font-size: 32upx;
		padding-bottom: 22upx;
	}

	.text2 {
		color: #999999;
		font-size: 26upx;
	}

	.select-tab {
		width: 241upx;
		height: 242upx;
		border-radius: 10upx;
		position: fixed;
		right: 24upx;
		top: 250upx;
		z-index: 10000;
	}

	.sanjiaox {
		border-style: solid;
		border-width: 15upx 15upx 15upx 15upx;
		border-color: transparent transparent white transparent;
		width: 0upx;
		height: 0upx;
		position: absolute;
		right: 10upx;
		top: -27upx;
	}

	.hidden-box {
		width: 100%;
		height: 240upx;
		border-radius: 10upx;
		background-color: white;
	}

	.small-Box {
		height: 80upx;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		display: flex;
		padding: 29upx 37upx;
		box-sizing: border-box;
		align-items: center;

	}

	.small-Box.active {
		border: none;
	}

	.menu-title {
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 20upx;
	}

	.small-Box image {
		width: 30upx;
		height: 30upx;
	}

	.small-Box .img1 {
		width: 28upx;
		height: 28upx;
	}
</style>
